<template>
  <div class="login">
    <div class="imgBox">
      <img
        src="https://usrsyswsdl.vivo.com.cn/usermng/1640178230641.jpg"
        alt=""
      />
      <div class="vivobox">
        <router-link to="/">VIVO</router-link>
      </div>

      <div class="inner-box">
        <h1>账号密码登录</h1>
        <!-- 手机号输入部分 -->
        <div class="phone">
          <!-- 地区选择 -->
          <template>
            <el-select v-model="value" placeholder="value" class="leftPhone">
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.value"
                :value="item.label"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.value
                }}</span>
              </el-option>
            </el-select>
          </template>
          <!-- 手机号输入框 -->
          <template>
            <el-input
              class="rightPhone"
              v-model="phone"
              placeholder="请输入内容"
              @blur="phoneNum"
            ></el-input>
          </template>
        </div>
        <div class="tip1"></div>
        <!-- 密码输入部分 -->
        <div class="pass">
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            @blur="passNum"
          ></el-input>
        </div>
        <div class="tip2"></div>

        <template>
          <el-button class="login" type="text" @click="login">登录</el-button>
        </template>
        <button class="register" @click="registerFn">注册VIVO账号</button>

        <div class="other">
          <p>其他登录方式</p>
          <i class="iconfont icon-xinlangweibo"></i>
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-zhifubao"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin } from "../api/test";
export default {
  data() {
    return {
        //国家手机号前缀
      cities: [
        {
          value: "+86",
          label: "中国",
        },
        {
          value: "+91",
          label: "印度",
        },
        {
          value: "+62",
          label: "印度尼西亚",
        },
        {
          value: "+66",
          label: "泰国",
        },
        {
          value: "+60",
          label: "马来西亚",
        },
        {
          value: "+84",
          label: "越南",
        },
      ],
      //地区选择框
      value: "+86",
      //手机号
      phone: JSON.parse(sessionStorage.getItem("user"))&&(JSON.parse(sessionStorage.getItem("user")).phone)||"",
      //密码
      password: "",
      //正则验算状态
      flag: false,
    };
  },
  methods: {
      //手机号正则验算
    phoneNum() {
      let tip = document.querySelector(".tip1");
      if (/^1\d{10}$/.test(this.phone)) {
        tip.innerHTML = "";
        this.flag = true;
      } else if (this.phone == "") {
        tip.innerHTML = "手机号不能为空";
        tip.style.color = "red";
        this.flag = false;
      } else {
        tip.innerHTML = "手机号格式错误";
        tip.style.color = "red";
        this.flag = false;
      }
    },
    //密码正则运算
    passNum() {
      let tip = document.querySelector(".tip2");
      if (this.password == "") {
        tip.innerHTML = "密码不能为空";
        tip.style.color = "red";
        this.flag = false;
      } else if (this.password.length < 6 || this.password.length >= 18) {
        tip.innerHTML = "密码长度不正确";
        tip.style.color = "red";
        this.flag = false;
      } else {
        tip.innerHTML = "";
        this.flag = true;
      }
    },

    //登录按钮
    login() {
      if (this.flag) {
        userLogin({
          phone: this.phone,
          password: this.password,
        }).then((res) => {
          console.log(res);
          sessionStorage.setItem("user",JSON.stringify(res.data.result))
          this.$store.commit("userLogin")
          this.$confirm("现在将前往购物车, 是否继续?", "提示", {
            confirmButtonText: "继续",
            cancelButtonText: "前往首页",
            type: "warning",
            center: true,
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "现在在购物车页面!",
              });
              this.$router.push({ path: "/shopcar" });
            })
            .catch(() => {
              this.$message({
                type: "success",
                message: "现在在商城首页",
              });
              this.$router.push({ path: "/" });
            });
        });
      }else{
          alert("请输入正确的手机号和密码")
      }
    },

    // 跳转注册页
    registerFn(){
      this.$router.push({path:"/register"})
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  background-color: rgb(244, 220, 196);
  .imgBox {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    img {
      width: 100%;
    }
    .vivobox {
      position: absolute;
      top: 0;
      left: 282px;
      height: 52px;
      width: 145px;
      background-color: rgb(84, 84, 253);
      font-size: 40px;
      font-weight: bold;
      line-height: 52px;
      text-align: center;
      a {
        color: #fff;
      }
    }
    .inner-box {
      text-align: center;
      position: absolute;
      background-color: azure;
      width: 360px;
      min-height: 512px;
      padding: 30px;
      right: 0;
      top: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .phone {
        width: 100%;
        height: 50px;
        .leftPhone {
          width: 120px;
          border-right: none !important;
        }
        .rightPhone {
          width: 240px;
          border-left: none !important;
        }
      }
      .tip1 {
        position: absolute;
        top: 170px;
        left: 30px;
        font-size: 14px;
      }
      .tip2 {
        position: absolute;
        top: 255px;
        left: 30px;
        font-size: 14px;
      }
      .login {
        display: block;
        width: 100%;
        height: 50px;
        background-color: #456fff;
        border: none;
        cursor: pointer;
        color: #fff;
        font-size: 17px;
      }
      .register {
        display: block;
        width: 100%;
        height: 50px;
        font-size: 17px;
        background-color: #fff;
        border: 1px solid #456fff;
        cursor: pointer;
        &:hover {
          background-color: rgb(228, 224, 224);
          transition: all 0.3s;
        }
      }
      .other {
        margin-top: 20px;
        position: relative;
        border-top: 1px solid gray;
        height: 50px;
        line-height: 50px;
        text-align: center;
        p {
          position: absolute;
          background-color: azure;
          height: 30px;
          width: 120px;
          top: -25px;
          left: 50%;
          transform: translateX(-50%);
        }
        i {
          margin-right: 20px;
          margin-left: 10px;
          font-size: 25px;
        }
      }
    }
  }
}
</style>